<template>
  <el-button type="success" class="mb-4" @click="showForm = true">
    新增数据同步配置
  </el-button>
  <!-- 弹出表单 -->
  <el-dialog
    v-model="showForm"
    :title="!formData.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    width="25%"
  >
    <el-form
      :model="formData"
      ref="formRef"
      label-width="auto"
      @keyup.enter="addHandle"
    >
      <el-form-item label="名称:" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="类型:" prop="type">
        <el-select v-model="formData.type" placeholder="请选择数据同步类型">
          <el-option
            v-for="item in dsTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="来源数据源:" prop="url">
        <el-select v-model="formData.fromId" placeholder="请选择来源数据源">
          <el-option
            v-for="item in dsOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="目标数据源:" prop="userName">
        <el-select v-model="formData.toId" placeholder="请选择目标数据源">
          <el-option
            v-for="item in dsOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 表单底部操作按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showForm = false">取消</el-button>
        <el-button type="primary" @click="addHandle">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus/es"
//弹窗开关绑定
const showForm = ref(false)
import { ref, defineExpose, defineEmits, reactive, watch } from "vue"
import { submitData, getOne, getDataSourcesList } from "@/api/sync/dataSync"
//数据刷新
const emit = defineEmits(["refreshDataList"])
//表单数据模型
const formData = reactive({
  id: "",
  name: "",
  type: "",
  fromId: "",
  toId: "",
})
const formRef = ref()
//初始化数据
const init = (id?: number) => {
  showForm.value = true
  formData.id = ""

  // 重置表单数据
  if (formRef.value) {
    formRef.value.resetFields()
  }
  //查询单条数据
  if (id) {
    getOneData(id)
  }
}

//查询单条数据
const getOneData = (id: number) => {
  getOne(id).then((res) => {
    Object.assign(formData, res.data)
  })
}
// 表单提交
const addHandle = () => {
  submitData(formData)
    .then(() => {
      ElMessage.success({
        message: "操作成功",
        duration: 500,
        onClose: () => {
          showForm.value = false
          if (formRef.value) {
            formRef.value.resetFields() // 重置表单数据
          }
          emit("refreshDataList")
        },
      })
    })
    .catch((error) => {
      console.error("添加数据失败", error)
      ElMessage.error("操作失败，请检查网络或数据是否正确")
    })
}
//新增与编辑弹窗关闭时清空form表单
watch(showForm, (newVal) => {
  if (!newVal) {
    if (formRef.value) {
      formRef.value.resetFields()
    }
  }
})

const dsTypeOptions = [
  {
    value: 1,
    label: "批量同步",
  },
  {
    value: 2,
    label: "实时同步",
  },
]
const dsOptions = ref()
const getDataSourceList = () => {
  getDataSourcesList().then((res) => {
    dsOptions.value = res.data
  })
}

getDataSourceList()

//加载
defineExpose({
  init,
})
</script>
